<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('入库单据查询明细')"/>
  <style>
      [v-cloak] {
          display: none;
      }
      .deer-key {
          width: 95px;
      }
      .el-table__header tr,
      .el-table__header th {
          padding: 0!important;
          height: 40px!important;
      }
      .el-table__body tr,
      .el-table__body td {
          padding: 0!important;
          height: 40px!important;
      }
      .el-table .success-row {
          background: #f0f9eb;
      }
      .el-table tbody tr:hover > td {
          background-color: transparent!important;
      }
  </style>
</head>
<body>
<div class="container-div">
    <a class="btn btn-default" @click="closeModal()">
        <i class="fa fa-reply"></i> 返回
    </a>
    <el-row class="deer-panel">
<!--        <span style="color: #409EFF">入库单信息</span>-->
<!--        <el-divider style="margin-top: 10px"></el-divider>-->
        <el-col :span="8">
            <div class="deer-ky">
                <div class="deer-key">入库单号：</div>
                <div class="deer-value" v-cloak>{{billInMaster.billNo}}</div>
            </div>
        </el-col>
        <el-col :span="8">
            <div class="deer-ky">
                <div class="deer-key">SAP单号：</div>
                <div class="deer-value" v-cloak>{{billInMaster.sapNo}}</div>
            </div>
        </el-col>
        <el-col :span="8">
            <div class="deer-ky">
                <div class="deer-key">入库类型：</div>
                <div class="deer-value" v-if="billInMaster.type == 1">采购入库</div>
                <div class="deer-value" v-if="billInMaster.type == 2">生产退料</div>
                <div class="deer-value" v-if="billInMaster.type == 4">试做品</div>
                <div class="deer-value" v-if="billInMaster.type == 5">采购预收</div>
            </div>
        </el-col>
        <el-col :span="8">
            <div class="deer-ky">
                <div class="deer-key">单据状态：</div>
                <div class="deer-value" v-if="billInMaster.state == 1">待入库</div>
                <div class="deer-value" v-if="billInMaster.state == 2">部分入库</div>
                <div class="deer-value" v-if="billInMaster.state == 3">入库完成</div>
                <div class="deer-value" v-if="billInMaster.state == 4">过账完成</div>
                <div class="deer-value" v-if="billInMaster.state == 5">过账上传中</div>
                <div class="deer-value" v-if="billInMaster.state == 6">过账失败</div>
            </div>
        </el-col>
        <el-col :span="8">
            <div class="deer-ky">
                <div class="deer-key">SAP过账状态：</div>
                <div class="deer-value" v-if="billInMaster.sapState == 1">未过账</div>
                <div class="deer-value" v-if="billInMaster.sapState == 2">已过账</div>
                <div class="deer-value" v-if="billInMaster.sapState == 3">部分过账</div>
            </div>
        </el-col>
        <el-col :span="8">
            <div class="deer-ky">
                <div class="deer-key">供应商名称：</div>
                <div class="deer-value" v-cloak>{{billInMaster.supplierName}}</div>
            </div>
        </el-col>
        <el-col :span="8">
            <div class="deer-ky">
                <div class="deer-key">备注：</div>
                <div class="deer-value" v-cloak>{{billInMaster.memo}}</div>
            </div>
        </el-col>
        <el-col :span="8">
            <div class="deer-ky">
                <div class="deer-key">创建人：</div>
                <div class="deer-value" v-cloak>{{billInMaster.createUserName}}</div>
            </div>
        </el-col>
        <el-col :span="8">
            <div class="deer-ky">
                <div class="deer-key">创建时间：</div>
                <div class="deer-value" v-cloak>{{billInMaster.createTime}}</div>
            </div>
        </el-col>
        <el-col :span="8">
            <div class="deer-ky">
                <div class="deer-key">审核人：</div>
                <div class="deer-value" v-cloak>{{billInMaster.auditUserName}}</div>
            </div>
        </el-col>
        <el-col :span="8">
            <div class="deer-ky">
                <div class="deer-key">审核时间：</div>
                <div class="deer-value" v-cloak>{{billInMaster.auditTime}}</div>
            </div>
        </el-col>
    </el-row>

    <el-row :gutter="20">
        <el-col :span="24">
            <el-tabs type="border-card" class="deer-panel" style="margin-top: 15px;padding-top: 0">
                <el-tab-pane>
                    <span slot="label"><i class="el-icon-date"></i> 入库单详细</span>
                    <el-table :data="billDetails.list" border :row-class-name="tableRowClassName">
                        <el-table-column label="操作" align="center" width="200">
                            <template slot-scope="scope">
                                <el-button type="text" @click="lookOver(scope.row.billInDetailId, scope.$index)">托盘明细</el-button>
                                <el-button v-if="scope.row.weightReceived == null" type="text" @click="del(scope.row.billInDetailId, scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="batch" label="批次" align="center" width="150"></el-table-column>
                        <el-table-column prop="boxCode" label="托盘编码" align="center"  width="200"></el-table-column>
                        <el-table-column prop="itemCode" label="物料编码" align="center"  width="200"></el-table-column>
                        <el-table-column prop="itemName" label="物料描述" align="center" width="200"></el-table-column>
                        <el-table-column prop="billInState" label="质检状态" align="center" width="120">
                            <template slot-scope="scope">
                                <span v-if="scope.row.billInState == 1">合格</span>
                                <span v-if="scope.row.billInState == 2">待检</span>
                                <span v-if="scope.row.billInState == 3">不合格</span>
                                <span v-if="scope.row.billInState == 4">异常</span>
                                <span v-if="scope.row.billInState == 5">试做品</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sort" label="物料类型" align="center" width="120">
                            <template slot-scope="scope">
                                <span v-if="scope.row.sort ==1">
                                    钢材
                                </span>
                                <span v-if="scope.row.sort ==2">
                                    铜材
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="weight" label="标称重量" align="center"></el-table-column>
                        <el-table-column prop="weightReceived" label="称重重量" align="center"></el-table-column>
                        <el-table-column prop="unit" label="单位" align="center"></el-table-column>
                        <el-table-column prop="makeTime" label="生产日期" align="center" width="160">
                            <template slot-scope="scope">
                                {{scope.row.makeTime}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="takeTime" label="操作入库时间" align="center" width="160">
                            <template slot-scope="scope">
                                {{scope.row.takeTime}}
                            </template>
                        </el-table-column>
                    </el-table>
<!--                    <el-pagination-->
<!--                        @current-change="billDetailsCurrentPage"-->
<!--                        :current-page="billDetails.currentPage"-->
<!--                        :page-size="billDetails.pageSize"-->
<!--                        layout="prev, pager, next"-->
<!--                        :total="billDetails.total">-->
<!--                    </el-pagination>-->
                </el-tab-pane>
            </el-tabs>
        </el-col>
    </el-row>

    <el-dialog
            title="物料详细"
            width="80%"
            :visible.sync="itemListState">
        <el-table :data="itemDetails.list" border stripe height="265">
            <el-table-column prop="batch" label="流水批号" align="center"></el-table-column>
            <el-table-column prop="itemCode" label="物料编码" align="center"></el-table-column>
            <el-table-column prop="itemName" label="物料描述" align="center" width="200"></el-table-column>
            <el-table-column prop="sort" label="物料类型" align="center" width="110">
                <template slot-scope="scope">
                                <span v-if="scope.row.sort ==1">
                                    钢材
                                </span>
                    <span v-if="scope.row.sort ==2">
                                    铜材
                                </span>
                </template>
            </el-table-column>
            <el-table-column prop="weight" label="重量" align="center" width="80"></el-table-column>
            <el-table-column prop="unit" label="单位" align="center" width="80"></el-table-column>
        </el-table>
        <el-pagination
                @current-change="itemDetailsCurrentPage"
                :current-page="itemDetails.currentPage"
                :page-size="itemDetails.pageSize"
                layout="prev, pager, next"
                :total="itemDetails.total">
        </el-pagination>
        <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="closeItem()">关 闭</el-button>
  </span>
    </el-dialog>
</div>

<div th:include="include::footer"></div>
<script th:inline="javascript">
    var prefix = ctx + "in/billInMaster";

    var billId = parseInt(localStorage.getItem(prefix+'/detail'));

    var vue = new Vue({
        el: '.container-div',
        data: {
            ckid: '',
            billInMaster: [],
            billDetails: {
                currentPage: 1,
                pageSize: 10,
                total: '',
                list: []
            },
            getIndex: '',
            itemDetails: {
                currentPage: 1,
                pageSize: 5,
                total: '',
                list: []
            },
            itemListState: false
        },
        methods: {
            //关闭此页面
            closeModal(){
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            },
            //入库单信息
            getBillInMaster(){
                var that = this;
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: prefix+'/findBillInMasterById',
                    data: {
                        billId: billId
                    },
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        if(data.auditTime != null){
                            data.auditTime = data.auditTime.slice(0, 19);
                        }
                        if(data.createTime != null){
                            data.createTime = data.createTime.slice(0, 19);
                        }
                        if(data.memo == null){
                            data.memo = '无';
                        }
                        that.billInMaster = data;
                    }
                });
            },
            //入库单详细分页
            billDetailsCurrentPage(currentPage){
                this.billDetails.currentPage = currentPage;
                this.getBillDetails(null);
            },
            //入库单详细列表
            getBillDetails(){
                var that = this;
                $.ajax({
                    url: prefix+ "/findBillInDetailById",
                    type: "POST",
                    data: {
                        billId: billId,
                        pageSize: that.billDetails.pageSize,
                        pageNum: that.billDetails.currentPage
                    },
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        console.log(data)
                        for(var i = 0; i < data.length; i++){
                            if(data[i].takeTime != null){
                                data[i].takeTime = data[i].takeTime.slice(0, 10);
                            }
                            if(data[i].makeTime != null){
                                data[i].makeTime = data[i].makeTime.slice(0, 19);
                            }
                        }
                        that.billDetails.list = data;
                        // that.billDetails.total = data.total;
                    }
                })
            },
            //入库单详细查看明细
            lookOver(id, index){
                this.getIndex = index;
                this.itemListState = true;
                this.ckid = id;
                this.getItemDetails(id);
            },
            del(id, index) {
                var that = this;
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var url = prefix + "/delete";
                    var data = {
                        id: id
                    };
                    $.ajax({
                        cache: true,
                        type: "POST",
                        url: url,
                        data: data,
                        async: false,
                        error: function(request){
                            $.modal.alertError("系统错误");
                        },
                        success: function(data){
                            if(data.code == 0){
                                that.getBillDetails();
                                that.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                            }else{
                                that.$message({
                                    type: 'warning',
                                    message: data.msg
                                });
                            }
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //点击某行添加样式
            tableRowClassName({row, rowIndex}){
                if(rowIndex === this.getIndex){
                    return 'success-row';
                }
                return '';
            },
            //晶棒详细分页
            itemDetailsCurrentPage(currentPage){
                this.itemDetails.currentPage = currentPage;
                this.getItemDetails(this.ckid);
            },
            //晶棒详细列表
            getItemDetails(id){
                var that = this;
                $.ajax({
                    url: prefix+"/findBillInDetailItemById",
                    type: "POST",
                    data: {
                        detailId: id,
                        pageSize: that.itemDetails.pageSize,
                        pageNum: that.itemDetails.currentPage
                    },
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        that.itemDetails.list = data.rows;
                        that.itemDetails.total = data.total;
                    }
                })
            },
            //关闭晶棒详细
            closeItem(){
                this.itemListState = false;
                this.getIndex = '';
                this.itemDetails.list = [];
            }
        },
        created(){
            this.getBillInMaster();
            this.getBillDetails();
        }
    })
</script>
</body>
</html>
